<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-input v-model.trim="inputValue" placeholder="请输入要添加的内容"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="add">添加</el-button>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="tag_list">
      <el-tag size="middle" v-for="tag in lists" :key="tag" @close="del(tag)" closable>{{tag}}</el-tag>
    </div>
  </div>
</template>

<script>
export default {
    name: 'customSensitive',
    props: {
        listData: {
            type: String,
            default: '',
        },
    },
    created(){
      this.initList();
    },
    data() {
        return {
            lists: [],
            inputValue: '',
            listsCopy:""
        };
    },
    methods: {
        add() {
            if (this.inputValue) {
                this.lists.unshift(this.inputValue);
                this.inputValue = '';
            }
        },
        del(a) {
          var willDelIndex = this.lists.findIndex(item=> item === a);
          willDelIndex !== -1 && this.lists.splice(willDelIndex,1)
        },
        initList(){
            this.listData ? this.lists = this.listData.split(','): ""
        }
    },
    watch: {
        listData(newValue, oldValue) {
           this.initList();
            console.log('newValue :', newValue);
        },
    },
};
</script>

<style lang="scss" scoped>
.tag_list {
    min-height: 200px;
    .el-tag {
        margin-right: 10px;
    }
}
</style>